
<template>
  <div class="online-service-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="客服文字">
        <el-input
          v-model="data.text"
          placeholder="请输入客服文字"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="显示按钮">
        <el-switch v-model="data.showButton" />
      </el-form-item>

      <template v-if="data.showButton">
        <el-form-item label="按钮文字">
          <el-input
            v-model="data.buttonText"
            placeholder="请输入按钮文字"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="按钮类型">
          <el-select v-model="data.buttonType" placeholder="请选择按钮类型">
            <el-option label="主要" value="primary" />
            <el-option label="成功" value="success" />
            <el-option label="警告" value="warning" />
            <el-option label="危险" value="danger" />
            <el-option label="信息" value="info" />
            <el-option label="文本" value="text" />
          </el-select>
        </el-form-item>

        <el-form-item label="按钮大小">
          <el-select v-model="data.buttonSize" placeholder="请选择按钮大小">
            <el-option label="大" value="large" />
            <el-option label="默认" value="default" />
            <el-option label="小" value="small" />
          </el-select>
        </el-form-item>
      </template>

      <el-divider>样式设置</el-divider>

      <el-form-item label="布局方式">
        <el-radio-group v-model="data.layout">
          <el-radio label="horizontal">水平</el-radio>
          <el-radio label="vertical">垂直</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="对齐方式">
        <el-radio-group v-model="data.align">
          <el-radio label="left">左对齐</el-radio>
          <el-radio label="center">居中</el-radio>
          <el-radio label="right">右对齐</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="显示边框">
        <el-switch v-model="data.showBorder" />
      </el-form-item>

      <el-form-item v-if="data.showBorder" label="边框颜色">
        <el-color-picker v-model="data.borderColor" />
      </el-form-item>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="内边距">
        <el-slider 
          v-model="data.padding" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="右边距">
        <el-slider 
          v-model="styles.marginRight" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])
</script>

<style lang="scss" scoped>
.online-service-panel {
  padding: 10px;
}
</style>
